<template>
	<view class="">
		<view class="main">
			<view class="content">
				<view class="infoList_content" v-for="(item,index) in recordList" :key="index">
					<view class="flx_evaluate">
						<view class="">
							<!-- <view class="name">订单编号: {{item.payOrder}}</view> -->
							<view class="name">姓名: {{item.userName}}
							</view>
							<view class="name">联系方式: {{item.userMobile}}</view>
							<view class="name">提现方式: {{item.withdrawType == 1 ? '支付宝' : '微信'}}</view>
							<view class="name">提现支付账号: {{item.payAccount}}</view>
							<view class="name">提现积分数额: {{item.withdrawIntegral}}</view>
							<view class="name">提现金额人民币(元): {{item.moneyAmount}}</view>
							<view class="name">提现时间: {{item.createTime}}</view>
						</view>
						<view :class="item.state == 1 ? 'status1' : item.state == 2 ? 'status2' : 'status3'">
							{{item.state == 1 ? '待审核' : item.state == 2 ? '已支付' : '审核取消'}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :iconSize="17" />
			</view>
		</view>
		<view class="no-data-available" v-if="recordList.length == 0">
			<view class="center">
				<img src="../../static/images/no_data.png" class="no_data">
				<div>暂无内容~</div>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				integral: '',
				page: 1,
				limit: 5,
				cardNum: '',
				recordList: [],
				//需要加载的数据必须要触碰到每一页的底部才会加载数据
				status: 'loadmore',
				suo: true,
			}
		},
		methods: {
			getRecordListData() {
				let that = this
				request.get('/api/withdraw/record/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						this.recordList = res.data.list
						console.log(this.recordList, '22222222222')
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
			getonReachRecordListData() {
				let that = this
				request.get('/api/withdraw/record/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						this.recordList = this.recordList.concat(res.data.list)
						console.log(this.recordList, '22222222222')
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 5) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 5) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
		},
		onLoad() {

		},
		onShow() {
			this.getRecordListData()
		},
		onReachBottom() {
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.getonReachRecordListData()
				}, 1000)
				return;
			}
		},
	}
</script>

<style lang="less" scoped>
	page {
		// 想让块元素垂直居中显示,必须给父元素设置宽高
		height: 100vh;
		width: 100vw;
		position: relative;
		background: #F1F4F9;

		.content {
			width: 100%;
			margin-top: 28rpx;

			.infoList_content {
				// height: 310rpx;
				background: #FFFFFF;
				margin: 0 24rpx 24rpx;
				padding: 28rpx 0rpx 16rpx;

				.status,
				.status1,
				.status2,
				.status3,
				.status4,
				.status5 {
					width: 120rpx;
					height: 50rpx;
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					background: red;
					border-radius: 10rpx;
					text-align: center;
					line-height: 50rpx;
					margin: 0 0 24rpx 36rpx;
				}

				.status1 {
					// background: #3eaafb;
					background: var(--global-bg-color);
				}

				.status2 {
					// color: #999;
					background: #3eaafb;

				}

				.status3 {
					width: 140rpx;
					background: #ff2626;
					margin: 0;
				}

				.status4 {
					color: #999;
					background: #EBEBEB;
					margin: 0;
				}

				.status5 {

					// color: #999;
					background: #3eaafb;

				}

				.flx_type {
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #000000;
					line-height: 84rpx;

					.weightNum {
						font-weight: 400;
						font-size: 24rpx;
						margin-left: 30rpx;

						text {
							font-size: 60rpx;
							color: #3EAAFB;
							margin: 0 10rpx;
						}
					}
				}

				.line {
					width: 100%;
					height: 1rpx;
					background: #EBEBEB;
					margin: 40rpx 0 15rpx;
				}

				.time {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;

					text {
						font-size: 24rpx;
						color: #999;
						margin-left: 10rpx;
					}
				}

				.flx_evaluate {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 36rpx;

					.name {
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}

	.no-data-available {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.no_data {
		width: 380rpx;
		height: 300rpx;
	}
</style>